<template>
    <div>
      <TypeNav></TypeNav>
<!--      使用Type组件(重复的组件),不好修改原来的组件只好重构-->
      <div class="main">
        <div class="py-container">
          <div class="bread">
            <ul class="fl sui-breadcrumb">
              <li><a href="#">全部结果</a> </li>
            </ul>
            <ul class="fl sui-tag">
              <li v-if="searchParams.categoryName">{{searchParams.categoryName}}<i @click="removeCategoryName">x</i></li>
              <li v-if="searchParams.keyword">{{searchParams.keyword}}<i @click="removekeyword">x</i></li>
              <li v-if="searchParams.trademark">{{searchParams.trademark.split(":")[1]}}<i @click="removeTrandeMark">x</i></li>
              <li v-for="(props,index) in searchParams.props" :key="index">{{props.split(':')[1]}}<i @click="removeProps(index)">x</i></li>
            </ul>
          </div>
          <SearchSelector @trandemark="trandemarkInfo" @attr="attrInfo"/>
          <div class="details clearfix">
         <div class="filter">
            <ul>
              <li  :class="{active:isOne()}" @click="changeOrder('1')">
                <a href="javascript:void(0)">综合
                  <span class="iconfont" v-show="isOne()" :class="{'icon-long-arrow-up':isAsc(),'icon-long-arrow-down':isDesc()}"></span>
<!--                  span标签里面放的是图标,需要iconfont和他的名字,在线引用需要在index.html里面引用-->
                </a>
              </li>
             <li  :class="{active:isTwo()}" @click="changeOrder('2')">
               <a href="javascript:void(0)">价格
                 <span v-show="isTwo()" class="iconfont" :class="{'icon-long-arrow-up':isAsc(),'icon-long-arrow-down':isDesc()}"></span>
               </a>
             </li>
            </ul>
         </div>
          </div>
          <div class="good-list">
            <ul>
              <li v-for="(good,index) in getGoodsList" :key="good.id">
                <router-link :to="`/detail/${good.id}`"><img :src="good.defaultImg"/></router-link>
                <div class="price"><strong>￥{{good.price}}</strong></div>
                <div class="attr"><a href="#" titled="促销信息,下单赠送三个月CIBN视频会员卡! 【小米电视新品4A 58 火爆预约中】">{{good.title}}</a> </div>
                <div class="commit"><span>已有<i>2000</i>人评价</span></div>
                <div class="operate">
                  <a href="#">加入购物车</a>
                  <a href="#">收藏</a>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <Pagination :pageSize="searchParams.pageSize" :pageNo="searchParams.pageNo" :total="total" :continues="5" @getPageNo="getPageNo"/>
    </div>
</template>
<script>
import SearchSelector from '../../pages/search/SearchSelector/index'
import {mapGetters,mapState} from 'vuex'
import Header from "../../components/header";
export default{
    name:'search',
  components:{
    Header,
    SearchSelector,
  },
  data(){
    return{
      active1:true,
      active2:false,
      searchParams:{
        category1Id:"",
        category2Id:"",
        category3Id:"",
        //上面是分类的级别id
        categoryName:"",
        keyword:"",//分类关键字
        order:"1:desc",//排序
        pageNo:7,//默认页面
        pageSize:3,//多少条数据
        props:[],//平台售卖属性所带的参数
        trademark:"",//品牌
      }
    }
  },
  watch:{
    $route(newValue,oldValue){//注意一下,这里的路由不需要加this
      Object.assign(this.searchParams,this.$route.query,this.$route.params)
      //assign是es6中的方法,他是将第一个数据根据关键名匹配,并修改为后面中的值(这里是根据路由导航的参数并修改对应的请求参数的值)
        this.getData()
      this.searchParams.category1Id=''
      this.searchParams.category2Id=''
      this.searchParams.category3Id=''
      console.log(this.searchParams)
      //请求到参数后将其变为空(不然其他的id还存在,但是不影响)
    }
  },
  methods:{
      getPageNo(pageNo){
        this.searchParams.pageNo=pageNo
        this.getData()
      },
      changeOrder(index){
        let newOrder=''
        let flagNumber= this.searchParams.order.split(':')[0]
        let flagOrder=this.searchParams.order.split(':')[1]
         if(index=='1'){
           newOrder= `${index}:${flagOrder==='desc'?'asc':'desc'}`
         }else{
           newOrder= `${index}:${flagOrder==='desc'?'asc':'desc'}`
         }
         this.searchParams.order=newOrder
        this.getData()
      },
      isDesc(){
        return this.searchParams.order.indexOf('desc')!=-1
      },
    isAsc(){
      return this.searchParams.order.indexOf('asc')!=-1//查询里面是否是升序,其他方法雷同
    },
      isOne(){
        return this.searchParams.order.indexOf('1')!=-1
      },
    isTwo(){
      return this.searchParams.order.indexOf('2')!=-1
    },
    attrInfo(attr, attrValue) {
        console.log(attr,attrValue)
      let props=`${attr.attrId}:${attrValue}:${attr.attrName}`
      if(this.searchParams.props.indexOf(props) ===-1) this.searchParams.props.push(props)
      this.getData()
    },
    removeProps(index){
        this.searchParams.props.pop()
      this.getData()
    },
    removeTrandeMark(){
      this.searchParams.trademark=''
      this.getData()
    },
      trandemarkInfo(tradeMark){
        console.log('我是父组件',tradeMark)
        this.searchParams.trademark=`${tradeMark.tmId}:${tradeMark.tmName}`
        this.getData()
      },
 getData(){
   this.$store.dispatch('getSearchList',this.searchParams)
 },
    removeCategoryName(){
   this.searchParams.categoryName=undefined
      this.searchParams.category1Id=undefined
      this.searchParams.category2Id=undefined
      this.searchParams.category3Id=undefined
      //不让他置空而让他为undefined,可以让他不参与服务器请求的数据(性能更好)
      this.getData()
      if(this.$route.params) this.$router.push({name:'search',params:this.$route.params})
      //当你有有params参数时,只需要删除导航栏的query参数即可
    },
    removekeyword() {
      this.searchParams.keyword = undefined
      this.$bus.$emit('remove', '')
      if (this.$route.query) this.$router.push({name: 'search',query: this.$route.query})
      //清除后要保留query参数
      }
  },
  beforeMount() {
  // this.searchParams.category1Id=this.$route.query.category1Id
  //   this.searchParams.category2Id=this.$route.query.category2Id
  //   this.searchParams.category3Id=this.$route.query.category3Id
  //   this.searchParams.categoryName=this.$route.query.categoryName
  //   this.searchParams.keyword=this.$route.params.categoryName
 Object.assign(this.searchParams,this.$route.query,this.$route.params)
  },
  mounted() {
    this.getData()
  },
  computed:{
      ...mapGetters(["getGoodsList"]),
    // getters不分模块所以可直接用数组获取
    ...mapState({
      total:state=>state.searchList.total
    })
  }
}
</script>
<style scoped lang="less">
.active{
  background: #e1251b;
 a {
   color: #fff !important;
 }
}
.good-list{
  width:1200px;
  margin: 20px auto;
  height: auto;
  ul{
    padding:0 10px;
    display: flex;
    width: 1200px;
    margin: 0 auto;
    justify-content:flex-start;
    flex-wrap: wrap;
    li {
      //margin-left: 10px;
      //margin-top: 10px;
      width: 235px;
      height: 408px;
      margin-top: 30px;
      strong{
        margin-left: 15px;
        color:rgb(200, 22, 35);
        font-size: 18px;
      }
      .attr{
        margin-right: 0px;
        margin-bottom: 8px;
        color:rgb(167, 167, 167);
        width: 219px;
        height: 66px;
        a{
          font-size: 12px;
          color: #333;
        }
      }
      .operate{
        width: 180px;
        height: 28px;
        padding: 12px 0px;
        a{
          padding: 2px 14px;
          margin-right:15px;
          font-size: 12px;
          line-height: 28px;
        }
        a:nth-child(1){
          border: 1px solid #e1251b;
          color: #e1251b;
        }
        a:nth-child(2){
          border: 1px solid #8c8c8c;
          color: #8c8c8c;
        }
      }
      .commit{
        padding-left: 15px;
        span{
          font-size: 13px;
          color:rgb(167, 167, 167);
          i{
            color:rgb(100, 111, 176);
            font-style: normal;
            font-weight: 700;
          }
        }
      }
      img {
        height: 220px;
        width: 200px;
        margin-bottom: 30px;
      }
    }
  }
}
.details{
  width: 1200px;
  margin: 0 auto;
  border: 1px solid #e2e2e2;
  .filter{
    height: 42px;
    li{
      height: 42px;
      float: left;
      a{
        padding:12px 15px;
        font-size: 12px;
        color: #777;
        line-height: 40px;
      }
    }
  }
}
.main{
  width: 1200px;
  margin: 10px auto;
}
.bread{
  height:45px;
  width: 1200px;
  margin: 0 auto 5px;
  li:hover{
    color:  #007aff;
    cursor: pointer;
  }
}
.sui-breadcrumb{
  li{
    height: 18px;
    padding: 0 15px;
    a{
      display: block;
      line-height: 18px;
      text-align: center;
      color: #666;
      font-size: 12px;
    }
  }
}
.fl{
  float: left;
  background: #f7f7f7;
}
.sui-tag {
  li {
    margin-right: 5px;
    font-size: 12px;
    padding: 0 7px;
    border: 1px solid #dedede;
    float: left;
    i {
      padding-left: 10px;
    }
  }
}
</style>
